<template>
	<div @click="seeChat" id="chatbase-bubble-button"
			 style="position: fixed; bottom: 1rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: rgb(0, 0, 0);
			 box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
			 cursor: pointer; z-index: 999999998; transition: all 0.2s ease-in-out 0s; left: unset; transform: scale(1);">
		<div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999999999;">
			<img src="https://backend.chatbase.co/storage/v1/object/public/chat-icons/4a84dc98-32e3-4cf7-9aaf-9df171bd7f8a/chatbase--1--pdf-p680fxvnm.svg"
					 style="width: 50px; height: 50px; border-radius: 25px;">
		</div>
	</div>



</template>

<script setup lang='ts'>
import type { Ref ,watch} from 'vue'
import { computed, onMounted, onUnmounted, ref ,reactive,defineAsyncComponent} from 'vue'

const show = ref<boolean>(false)

function seeChat() {
    show.value = !show.value
    alert(show.value)
}
</script>

<style scoped>

</style>
